<template>
    <div :id="'floor' + curData.id" class="messageList-item-root" :style="delData.color" @click="root_ClickEvent">
        <div class="root-top">
            <span>
                #{{ curData.id }}
                <b style="margin-left: 10px">{{ curData.name }}</b>
            </span>
            <div class="clear-but" v-if="curData.isDel" @touchstart.stop="del_TouchstartEvent"
                @touchend.stop="del_TouchendEvent" @click.stop="del_ClickEvent">
                <span>DEL</span>
            </div>
        </div>
        <div class="root-date">
            <i>{{ setTime(curData.createTime) }}</i>
            <a v-if="toRank" @click="scrollToSection(toRank)">To: {{ toRank }} Floor</a>
        </div>
        <div class="root-text" v-html="setText(curData.text)"></div>
    </div>
</template>

<script setup>
import { nextTick } from 'vue'
import { delMessage_API } from "@/axios/api/other.js";
import { setTime } from "@/tools/index.js";

const props = defineProps({
    curData: {
        text: "",
    },
});
const toRank = ref(0);
const emits = defineEmits(["delItem"]);

const delData = ref({
    isStart: false,
    timer: null,
    timeIndex: 0,
    color: "",
});
const delTime = [3, 7];

const scrollToSection = (sectionId) => {
    const section = document.getElementById('floor' + sectionId);
    console.log(section.parentNode, section.parentNode.scrollTop)
    if (section) {
        section.parentNode.scrollIntoView(true);
    }
}

const setText = (text) => {
    const arr = text.split('<br/>');
    let temp = text;
    if (arr.length >= 2) {
        var num = parseInt(arr[0].substring(2, arr[0].length));
        if (arr[0].substring(0, 2) == 'to' && (num + '').length == arr[0].length - 2) {
            temp = temp.replace(`to${num}<br/>`, '');
            toRank.value = num;
        }
    }
    return temp;
};

const del_ClickEvent = () => {
    const { color } = delData.value;
    const { id } = props.curData;
    if (color) {
        //
        delMessage_API({
            id: id,
        })
            .then((res) => {
                console.log(res);
                if (res.data.statusCode == 0) {
                    emits("delItem", id);
                } else {
                    messageBox.show({
                        color: "red",
                        text: res.data.message,
                    });
                }
            })
            .catch((res) => {
                console.log(res);
            })
            .finally(() => {
                root_ClickEvent();
            });
    }
};

const root_ClickEvent = () => {
    const { color } = delData.value;
    if (color) {
        delData.value.color = "";
    }
};

const del_TouchstartEvent = () => {
    if (delData.value.timer != null) {
        clearInterval(delData.value.timer);
    }
    delData.value.timer = setInterval(() => {
        if (delData.value.isStart && delData.value.timeIndex >= delTime[1]) {
            //执行删除
            clearInterval(delData.value.timer);
            delData.value.timer = null;
            delData.value.timeIndex = 0;
            delData.value.color = "background:rgba(255,70,107,1);";
        } else if (delData.value.isStart && delData.value.timeIndex >= delTime[0]) {
            //开始变化
        } else if (delData.value.timeIndex >= delTime[0]) {
            delData.value.isStart = true;
        }
        delData.value.timeIndex++;
    }, 100);
};

const del_TouchendEvent = () => {
    if (delData.value.timer != null) {
        clearInterval(delData.value.timer);
    }
    delData.value.timeIndex = 0;
};
</script>

<style lang="scss" scoped>
.messageList-item-root {
    background: rgba(255, 255, 255, 0.5);
    padding: 7px;
    transition-duration: 0.3s;

    .root-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .clear-but {
            height: 15px;
            width: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: 7px;

            >span {
                margin-right: 10px;
                // color: rgb(255, 70, 107);
                font-size: 10px;
            }

        }
    }

    .root-date {
        height: 16px;
        display: flex;
        align-items: center;
        padding: 3px 0;
        // justify-content: space-between;

        >i {
            margin-left: 10px;
            color: rgb(88, 88, 88);
            font-size: 12px;
        }

        >a {
            font-size: 12px;
            margin-left: 20px;
        }
    }

    .root-text {
        font-size: 13px;
        margin: 0px 5px 3px 5px;
    }
}
</style>
